<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        .nav .nav-list a,
        .nav .nav-list i{
            display: block;
            color:rgba(107, 107, 107, 1);
            margin: 0px 5px;
        }
        .main{
            width: 100vw;
            height: 100vh;
            margin: 0px auto;
            background-image: url("/static/img/login.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .main .login{
            position: absolute;
            left:50%;
            top:240px;
            margin-left: -220px;
            width: 440px;
            height: 340px;
            background-color: #fff;
        }
        .main .login .login-title{
            text-align: center;
            height: 70px;
            line-height: 70px;
            width: 80%;
            margin: 0px auto;
            border-bottom: 1px solid rgba(204, 204, 204, 1);
        }
        .main .login .login-title h2{
            display: inline-block;
            height: 100%;
            line-height: 100%;
            width: 100%;
            text-align: center;
        }
        .main .login .login-title a{
            display: inline-block;
            text-align:right;
            font-size: 14px;
            width: 40%;
        }
        .main .login .login-u-p{
            width: 300px;
            margin-top:20px;
        }
        .main .login .login-u-p .label{
            width: 300px;
            display: block;
            margin:25px 40px;
            height: 40px;
            line-height: 40px;
        }
        .main .login .login-u-p label b{
            margin-left: 65px;
            margin-top: -5px;
            display: block;
            font-size: 18px;
            color: red;
            position: absolute;
        }
        .main .login .login-u-p label span{
            display: inline-block;
            text-align: right;
            width: 60px;
        }
        .main .login input[type="text"],
        .main .login input[type="password"]{
            border: 1px solid rgba(130, 130, 130, 1);
            width: 220px;
            height: 35px;
            line-height: 35px;
            text-indent: 2em;
        }
        .main .login input[type="number"]{
            border: 1px solid rgba(130, 130, 130, 1);
            width: 105px;
            height: 35px;
            line-height: 35px;
        }
        .main .login .login-u-p .code{
            display: flex;
            align-items: center;
            justify-items: center;
        }
        .main .login img{
            width: 80px;
            height: 35px;
            margin: 0px 10px;
            display: inline;
        }
        .main .login .button{
            width: 220px;
            margin:10px auto;
        }
        .main .login .button a{
            float: right;
        }
        .main .login .button input[type="button"]{
            width: 100%;
            display: block;
            margin: 10px auto;
            background-color: rgba(42, 130, 228, 1);
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: none;
            color: #fff;
        }
        .heibu{width: 100%;height: 100%;position: fixed;left: 0px;top:0px;background: rgba(0,0,0,0.3);z-index: 1000;display: none;}
        .atfer{width: 300px;height: 100px;margin-top: -101px;margin-left: -151px;position: absolute;z-index:1001;left:50%;top:30%;background: white;border: 1px solid #000;}
        .atfer h2{width: 90%;margin: 0px 5%;text-align: center;color:#030303;height: 50px;line-height: 50px;}
        .atfer a{width: 25px;height: 25px;line-height: 25px;border-radius: 50%;background-color: red;color: #fff;text-align: center;font-weight: bold;text-decoration: none;position: absolute;left:50%;top:30%;margin-top: -44px;margin-left: 138px;}
        .zz{display: none;width: 80px;height: 80px;position: absolute;z-index:1001;left:50%;top:30%;margin-top: -40px;margin-left: 40px;}
        .zz img{width: 100%;height: 100%}
    </style>
</head>
<body>
    <div class="heibu" id="heibu">
        <div class="zz" id="zz">
            <img src="/zz.gif" alt="">
        </div>
        <div class="atfer" id="after">
            <a href="javascript:;" onclick="document.getElementById('heibu').style = 'display:none'">X</a>
            <h2 id="error"></h2>
        </div>
    </div>
    <div class="main">
        <div class="login">
            <div class="login-title">
                <h2>后台登录</h2>
            </div>
            <div class="login-u-p">
                <label for="username" class="label">
                    <span>账号:</span>
                    <input type="text" id="username" name="username" placeholder="请输入手机号码">
                </label>
                <label for="password" class="label">
                    <span>密码:</span>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                </label>
                <label for="code" class="label code">
                    <span>验证码:</span>
                    <img src="/sys/image" id="codeimg" onclick="this.src='/sys/image?' + Math.random()">
                    <input type="number" id="code" name="code" placeholder="请输入验证码">
                </label>
            </div>
            <div class="button">
                <input type="button" onclick="login()" value="立刻登录">
            </div>
        </div>
    </div>
    <form id="myForm" action="/admin/login" method="POST" style="display: none;">
        <input type="text" name="token" id="token">
    </form>
</body>
<script src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script>
    function errormsg(msg){
        document.getElementById('error').innerText = msg;
        document.getElementById('zz').style = 'display:none;';
        document.getElementById('after').style = 'display:block';
        document.getElementById('heibu').style = 'display:block';
    }
    function login(){
        let message = {
            username:document.getElementById('username').value,
            password:document.getElementById('password').value,
            code:document.getElementById('code').value
        };
        $.ajax({
            url: '/sys/login?' + Math.random(), // 你的 PHP 脚本的 URL
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'
            dataType: 'json', // 预期服务器返回的数据类型
            data: message,
            success: function(res) {
                if (res.code == 200) {
                    const token = res.data;
                    setCookie('token', token, 7);
                    const form = document.getElementById('myForm');
                    document.getElementById('token').value = res.data;
                    form.submit();
                }else{
                    errormsg(res.msg);
                    document.getElementById('codeimg').click();
                }
            }
        });
    }
    // 设置一个名为 'authToken' 的 Cookie，并设置其值为一个示例 token
    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }
</script>
</html>